<template>
	<!-- 检测建议 -->
	<div class="suggest">
		<div class="title">
			<h3 class="m-header">检测建议</h3>
			<span class="green btn" v-if="type == 'success'">合格</span>
			<span class="red btn" v-if="type == 'failed'">不合格</span>
		</div>
		<p class="content" v-if="type == 'success'">{{name}}同学，在此次视力检测中，您的检测结果合格，继续保持哦！</p>
		<p class="content" v-if="type == 'failed'">{{name}}同学，在此次视力检测中，您的检测结果不合格，希望你以后能多加注重眼睛视力的保护，多吃红萝卜和有机蔬菜，补充睡眠。加油喔！</p>
	</div>
</template>

<script>
export default {
	props:["name","type"],
	data () {
		return {
			
		}
	},
	methods:{

	},

}
</script>

<style lang="scss" scoped>
	// 体质建议
	.suggest{
		margin: 15px;
		padding: 15px;
		background-color: #fff;
		box-shadow:0 0 5px #ccc;
		border-radius: 6px;
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 15px;
			border-bottom: 1px solid #eee;
			.btn{
				padding: 6px 15px;
				border-radius: 6px;
				color: #fff;
				font-size: 14px;
			}
			.green{
				background-color: #00CC00;
			}
			.red{
				background-color: #FF4D4D;
			}
		}
		.content{
			padding-top: 10px;
		}
	}
</style>